<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>婚礼流程最全最全详细清单表 | 婚礼筹备备助手</title>
  <script src="../css/tailwind3.4.17.css"></script>
  <link href="../css/all.min.css" rel="stylesheet">
  <script src="../js/html2canvas.min.js"></script>
  
 <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#F8B4C0',
            secondary: '#E6F7FF',
            accent: '#FFD700',
            neutral: '#F8F9FA',
            dark: '#4A5568',
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
          boxShadow: {
            'soft': '0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1)',
            'medium': '0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06)',
          }
        }
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .text-shadow {
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
      }
      .bg-gradient-soft {
        background: linear-gradient(135deg, #F8B4C0 0%, #FCE4EC 100%);
      }
      .transition-all-300 {
        transition: all 300ms ease-in-out;
      }
      .table-header {
        @apply bg-primary text-white font-semibold py-3 px-4 text-left;
      }
      .table-cell {
        @apply py-3 px-4 border-b border-gray-200;
      }
      .task-complete {
        @apply line-through text-gray-400;
      }
      .btn-primary {
        @apply bg-primary hover:bg-opacity-90 text-white font-medium py-2 px-4 rounded-md transition-all-300 shadow-soft;
      }
      .btn-secondary {
        @apply bg-white hover:bg-gray-50 text-primary font-medium py-2 px-4 rounded-md border border-primary transition-all-300 shadow-soft;
      }
      .btn-accent {
        @apply bg-accent hover:bg-opacity-90 text-dark font-medium py-2 px-4 rounded-md transition-all-300 shadow-soft;
      }
      .fixed-action-buttons {
        @apply fixed right-4 top-1/2 transform -translate-y-1/2 z-40 flex flex-col space-y-3;
      }
      .fab-button {
        @apply w-14 h-14 rounded-full flex items-center justify-center text-white shadow-lg transition-all duration-300 transform hover:scale-110 hover:shadow-xl;
      }
      .fab-primary {
        @apply bg-primary hover:bg-opacity-90;
      }
      .fab-secondary {
        @apply bg-white text-primary border-2 border-primary hover:bg-primary hover:text-white;
      }
      .fab-accent {
        @apply bg-accent text-dark hover:bg-opacity-90;
      }
      .fab-tooltip {
        @apply absolute right-full mr-3 whitespace-nowrap bg-dark text-white px-3 py-1 rounded-md text-sm opacity-0 transition-opacity duration-300 invisible;
        width: max-content;
      }
      .fab-container:hover .fab-tooltip {
        @apply opacity-100 visible;
      }
      .main-content {
        @apply pr-20;
      }
      @media (max-width: 768px) {
        .fixed-action-buttons {
          @apply right-2 bottom-2 top-auto transform-none flex-row;
        }
        .main-content {
          @apply pr-0 pb-20;
        }
        .fab-tooltip {
          @apply hidden;
        }
      }
    }
  </style>
</head>
<body class="bg-gray-50 font-sans">
  <div class="fixed-action-buttons">
    <div class="fab-container">
      <button id="addTaskFab" class="fab-button fab-primary">
        <i class="fa fa-plus text-xl"></i>
      </button>
      <span class="fab-tooltip">添加任务</span>
    </div>
    
    <div class="fab-container">
      <button id="exportImageFab" class="fab-button fab-accent">
        <i class="fa fa-download text-xl"></i>
      </button>
      <span class="fab-tooltip">导出长图</span>
    </div>
  </div>

  <div id="addTaskModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-lg shadow-lg w-full max-w-4xl max-h-[90vh] overflow-y-auto">
      <div class="p-6">
        <div class="flex justify-between items-center mb-4">
          <h2 class="text-xl font-semibold text-dark">
            <i class="fa fa-plus-circle text-primary mr-2"></i> 添加自定义任务
          </h2>
          <button id="closeModalBtn" class="text-gray-500 hover:text-gray-700">
            <i class="fa fa-times text-xl"></i>
          </button>
        </div>
        <form id="addTaskForm" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          <div>
            <label for="newTaskName" class="block text-sm font-medium text-gray-700 mb-1">任务名称 <span class="text-red-500">*</span></label>
            <input type="text" id="newTaskName" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
          </div>
          <div>
            <label for="newTaskStage" class="block text-sm font-medium text-gray-700 mb-1">阶段 <span class="text-red-500">*</span></label>
            <select id="newTaskStage" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
              <option value="12months">婚礼前12个月</option>
              <option value="6months">婚礼前6个月</option>
              <option value="3months">婚礼前3个月</option>
              <option value="1month">婚礼前1个月</option>
              <option value="2weeks">婚礼前2周</option>
              <option value="1week">婚礼前1周</option>
              <option value="1day">婚礼前1天</option>
              <option value="wedding">婚礼当天</option>
              <option value="after">婚礼后</option>
            </select>
          </div>
          <div>
            <label for="newTaskPriority" class="block text-sm font-medium text-gray-700 mb-1">优先级</label>
            <select id="newTaskPriority" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
              <option value="high">高</option>
              <option value="medium" selected>中</option>
              <option value="low">低</option>
            </select>
          </div>
          <div>
            <label for="newTaskBudget" class="block text-sm font-medium text-gray-700 mb-1">预算 (元)</label>
            <input type="number" id="newTaskBudget" min="0" step="0.01" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
          </div>
          <div class="md:col-span-2 lg:col-span-4">
            <label for="newTaskNotes" class="block text-sm font-medium text-gray-700 mb-1">备注</label>
            <textarea id="newTaskNotes" rows="2" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"></textarea>
          </div>
          <div class="md:col-span-2 lg:col-span-4 flex justify-end">
            <button type="button" id="cancelAddTask" class="btn-secondary mr-3">
              取消
            </button>
            <button type="submit" class="btn-primary">
              <i class="fa fa-plus mr-1"></i> 添加任务
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <main class="container mx-auto px-4 py-8 main-content">
    <div class="bg-white rounded-lg shadow-medium p-6 mb-8">
      <h2 class="text-xl font-semibold text-dark mb-4 flex items-center">
        <i class="fa fa-calendar text-primary mr-2"></i> 婚礼日期设置
      </h2>
      <div class="flex flex-col md:flex-row items-start md:items-center space-y-4 md:space-y-0 md:space-x-4">
        <div class="flex-1">
          <label for="weddingDate" class="block text-sm font-medium text-gray-700 mb-1">选择婚礼日期</label>
          <input type="date" id="weddingDate" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
        </div>
        <div class="flex-1">
          <label for="daysLeft" class="block text-sm font-medium text-gray-700 mb-1">距离婚礼还有</label>
          <div id="daysLeft" class="text-lg font-semibold text-primary">-- 天</div>
        </div>
        <div class="md:ml-auto">
          <button id="updateDateBtn" class="btn-primary">
            <i class="fa fa-refresh mr-1"></i> 更新
          </button>
        </div>
      </div>
    </div>

    <div class="bg-white rounded-lg shadow-medium p-6 mb-8">
      <div class="flex flex-col md:flex-row justify-between items-start md:items-center space-y-4 md:space-y-0">
        <div class="flex items-center space-x-4">
          <div>
            <label for="filterStage" class="block text-sm font-medium text-gray-700 mb-1">筛选阶段</label>
            <select id="filterStage" class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
              <option value="all">全部阶段</option>
              <option value="12months">婚礼前12个月</option>
              <option value="6months">婚礼前6个月</option>
              <option value="3months">婚礼前3个月</option>
              <option value="1month">婚礼前1个月</option>
              <option value="2weeks">婚礼前2周</option>
              <option value="1week">婚礼前1周</option>
              <option value="1day">婚礼前1天</option>
              <option value="wedding">婚礼当天</option>
              <option value="after">婚礼后</option>
            </select>
          </div>
          <div>
            <label for="filterStatus" class="block text-sm font-medium text-gray-700 mb-1">筛选状态</label>
            <select id="filterStatus" class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
              <option value="all">全部状态</option>
              <option value="pending">待完成</option>
              <option value="completed">已完成</option>
            </select>
          </div>
        </div>
        <div class="w-full md:w-64">
          <label for="searchInput" class="block text-sm font-medium text-gray-700 mb-1">搜索任务</label>
          <div class="relative">
            <input type="text" id="searchInput" placeholder="输入关键词搜索..." class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
            <i class="fa fa-search absolute left-3 top-3 text-gray-400"></i>
          </div>
        </div>
      </div>
    </div>

    <div id="tableContainer" class="bg-white rounded-lg shadow-medium overflow-hidden mb-8">
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
            <tr>
              <th scope="col" class="table-header w-16">序号</th>
              <th scope="col" class="table-header">任务名称</th>
              <th scope="col" class="table-header hidden md:table-cell">阶段</th>
              <th scope="col" class="table-header hidden lg:table-cell">优先级</th>
              <th scope="col" class="table-header hidden md:table-cell">预算</th>
              <th scope="col" class="table-header hidden xl:table-cell">备注</th>
              <th scope="col" class="table-header w-24 text-right">操作</th>
            </tr>
          </thead>
          <tbody id="taskTableBody" class="bg-white divide-y divide-gray-200">
          </tbody>
        </table>
      </div>
    </div>
    
    <div id="mobileAddTaskSection" class="md:hidden bg-white rounded-lg shadow-medium p-6 mb-8">
      <h2 class="text-xl font-semibold text-dark mb-4 flex items-center">
        <i class="fa fa-plus-circle text-primary mr-2"></i> 添加自定义任务
      </h2>
      <form id="mobileAddTaskForm" class="grid grid-cols-1 gap-4">
        <div>
          <label for="mobileNewTaskName" class="block text-sm font-medium text-gray-700 mb-1">任务名称 <span class="text-red-500">*</span></label>
          <input type="text" id="mobileNewTaskName" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
        </div>
        <div>
          <label for="mobileNewTaskStage" class="block text-sm font-medium text-gray-700 mb-1">阶段 <span class="text-red-500">*</span></label>
          <select id="mobileNewTaskStage" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
            <option value="12months">婚礼前12个月</option>
            <option value="6months">婚礼前6个月</option>
            <option value="3months">婚礼前3个月</option>
            <option value="1month">婚礼前1个月</option>
            <option value="2weeks">婚礼前2周</option>
            <option value="1week">婚礼前1周</option>
            <option value="1day">婚礼前1天</option>
            <option value="wedding">婚礼当天</option>
            <option value="after">婚礼后</option>
          </select>
        </div>
        <div>
          <label for="mobileNewTaskPriority" class="block text-sm font-medium text-gray-700 mb-1">优先级</label>
          <select id="mobileNewTaskPriority" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
            <option value="high">高</option>
            <option value="medium" selected>中</option>
            <option value="low">低</option>
          </select>
        </div>
        <div>
          <label for="mobileNewTaskBudget" class="block text-sm font-medium text-gray-700 mb-1">预算 (元)</label>
          <input type="number" id="mobileNewTaskBudget" min="0" step="0.01" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
        </div>
        <div>
          <label for="mobileNewTaskNotes" class="block text-sm font-medium text-gray-700 mb-1">备注</label>
          <textarea id="mobileNewTaskNotes" rows="2" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"></textarea>
        </div>
        <div class="flex justify-end">
          <button type="submit" class="btn-primary">
            <i class="fa fa-plus mr-1"></i> 添加任务
          </button>
        </div>
      </form>
    </div>
  </main>

  <div id="exportLoading" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white p-6 rounded-lg shadow-lg flex flex-col items-center">
      <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary mb-4"></div>
      <p class="text-lg font-medium text-dark">正在生成图片，请稍候...</p>
    </div>
  </div>

  <script>
    const weddingTasks = [
      {
        id: 1,
        name: "确定婚礼日期",
        stage: "12months",
        stageText: "婚礼前12个月",
        priority: "high",
        budget: 0,
        notes: "考虑季节、节假日和亲友的时间安排",
        completed: false
      },
      {
        id: 2,
        name: "制定婚礼预算",
        stage: "12months",
        stageText: "婚礼前12个月",
        priority: "high",
        budget: 0,
        notes: "确定总预算并分配到各个项目",
        completed: false
      },
      {
        id: 3,
        name: "确定婚礼形式和风格",
        stage: "12months",
        stageText: "婚礼前12个月",
        priority: "medium",
        budget: 0,
        notes: "中式、西式、户外、室内等",
        completed: false
      },
      {
        id: 4,
        name: "预定婚礼场地",
        stage: "12months",
        stageText: "婚礼前12个月",
        priority: "high",
        budget: 20000,
        notes: "提前预订热门场地，确认容纳人数和设施",
        completed: false
      },
      {
        id: 5,
        name: "确定婚礼主题和色彩",
        stage: "6months",
        stageText: "婚礼前6个月",
        priority: "medium",
        budget: 0,
        notes: "根据季节和个人喜好选择主题",
        completed: false
      },
      {
        id: 6,
        name: "预订摄影师和摄像师",
        stage: "6months",
        stageText: "婚礼前6个月",
        priority: "high",
        budget: 8000,
        notes: "查看作品风格，确认档期和服务内容",
        completed: false
      },
      {
        id: 7,
        name: "选择婚礼策划师(如有需要)",
        stage: "6months",
        stageText: "婚礼前6个月",
        priority: "medium",
        budget: 5000,
        notes: "根据预算和需求选择合适的策划师",
        completed: false
      },
      {
        id: 8,
        name: "挑选婚纱和礼服",
        stage: "6months",
        stageText: "婚礼前6个月",
        priority: "high",
        budget: 15000,
        notes: "预留足够时间进行试穿和修改",
        completed: false
      },
      {
        id: 9,
        name: "确定伴郎伴娘人选",
        stage: "6months",
        stageText: "婚礼前6个月",
        priority: "medium",
        budget: 0,
        notes: "提前邀请，确保他们有足够时间准备",
        completed: false
      },
      {
        id: 10,
        name: "确定婚礼菜单",
        stage: "3months",
        stageText: "婚礼前3个月",
        priority: "high",
        budget: 12000,
        notes: "考虑宾客的饮食限制和喜好",
        completed: false
      },
      {
        id: 11,
        name: "预订婚礼蛋糕",
        stage: "3months",
        stageText: "婚礼前3个月",
        priority: "medium",
        budget: 2000,
        notes: "品尝样品，确认设计和交付时间",
        completed: false
      },
      {
        id: 12,
        name: "选择婚礼音乐",
        stage: "3months",
        stageText: "婚礼前3个月",
        priority: "medium",
        budget: 3000,
        notes: "考虑乐队、DJ或播放列表",
        completed: false
      },
      {
        id: 13,
        name: "设计和发送婚礼请柬",
        stage: "3months",
        stageText: "婚礼前3个月",
        priority: "high",
        budget: 1000,
        notes: "包含RSVP信息和婚礼网站(如有)",
        completed: false
      },
      {
        id: 14,
        name: "预订蜜月旅行",
        stage: "3months",
        stageText: "婚礼前3个月",
        priority: "medium",
        budget: 20000,
        notes: "考虑季节和签证要求",
        completed: false
      },
      {
        id: 15,
        name: "确认宾客名单和座位安排",
        stage: "1month",
        stageText: "婚礼前1个月",
        priority: "high",
        budget: 0,
        notes: "根据RSVP回复进行调整",
        completed: false
      },
      {
        id: 16,
        name: "购买结婚戒指",
        stage: "1month",
        stageText: "婚礼前1个月",
        priority: "high",
        budget: 10000,
        notes: "预留时间进行尺寸调整",
        completed: false
      },
      {
        id: 17,
        name: "安排婚礼彩排",
        stage: "1month",
        stageText: "婚礼前1个月",
        priority: "high",
        budget: 0,
        notes: "邀请主要参与人员参加",
        completed: false
      },
      {
        id: 18,
        name: "准备婚礼誓词",
        stage: "1month",
        stageText: "婚礼前1个月",
        priority: "medium",
        budget: 0,
        notes: "个性化或传统誓词",
        completed: false
      },
      {
        id: 19,
        name: "确认所有供应商的细节",
        stage: "1month",
        stageText: "婚礼前1个月",
        priority: "high",
        budget: 0,
        notes: "场地、摄影、音乐、餐饮等",
        completed: false
      },
      {
        id: 20,
        name: "完成婚纱和礼服的最终试穿",
        stage: "2weeks",
        stageText: "婚礼前2周",
        priority: "high",
        budget: 0,
        notes: "确保合身，准备配饰",
        completed: false
      },
      {
        id: 21,
        name: "准备婚礼 favors(回礼)",
        stage: "2weeks",
        stageText: "婚礼前2周",
        priority: "medium",
        budget: 1500,
        notes: "个性化小礼物感谢宾客",
        completed: false
      },
      {
        id: 22,
        name: "确认婚礼流程细节",
        stage: "2weeks",
        stageText: "婚礼前2周",
        priority: "high",
        budget: 0,
        notes: "与司仪或策划师确认时间表",
        completed: false
      },
      {
        id: 23,
        name: "准备婚礼当天需要的物品清单",
        stage: "2weeks",
        stageText: "婚礼前2周",
        priority: "medium",
        budget: 0,
        notes: "包括应急物品、化妆品等",
        completed: false
      },
      {
        id: 24,
        name: "进行婚前美容护理",
        stage: "1week",
        stageText: "婚礼前1周",
        priority: "medium",
        budget: 1000,
        notes: "面部护理、美甲、美发等",
        completed: false
      },
      {
        id: 25,
        name: "确认婚礼当天的交通安排",
        stage: "1week",
        stageText: "婚礼前1周",
        priority: "high",
        budget: 2000,
        notes: "新人、家人和婚礼团队的交通",
        completed: false
      },
      {
        id: 26,
        name: "准备现金和零钱",
        stage: "1week",
        stageText: "婚礼前1周",
        priority: "medium",
        budget: 5000,
        notes: "用于支付小费和应急",
        completed: false
      },
      {
        id: 27,
        name: "最后确认所有供应商",
        stage: "1week",
        stageText: "婚礼前1周",
        priority: "high",
        budget: 0,
        notes: "确认时间、地点和特殊要求",
        completed: false
      },
      {
        id: 28,
        name: "举行婚礼彩排晚宴",
        stage: "1day",
        stageText: "婚礼前1天",
        priority: "medium",
        budget: 3000,
        notes: "邀请家人和婚礼团队",
        completed: false
      },
      {
        id: 29,
        name: "准备好所有婚礼物品",
        stage: "1day",
        stageText: "婚礼前1天",
        priority: "high",
        budget: 0,
        notes: "按清单整理，交给指定人员保管",
        completed: false
      },
      {
        id: 30,
        name: "早点休息，保证充足睡眠",
        stage: "1day",
        stageText: "婚礼前1天",
        priority: "high",
        budget: 0,
        notes: "避免熬夜，保持良好状态",
        completed: false
      },
      {
        id: 31,
        name: "早起，吃早餐",
        stage: "wedding",
        stageText: "婚礼当天",
        priority: "high",
        budget: 0,
        notes: "保持能量，准备迎接忙碌的一天",
        completed: false
      },
      {
        id: 32,
        name: "化妆和发型",
        stage: "wedding",
        stageText: "婚礼当天",
        priority: "high",
        budget: 2000,
        notes: "提前预约，留出足够时间",
        completed: false
      },
      {
        id: 33,
        name: "穿上婚纱/礼服",
        stage: "wedding",
        stageText: "婚礼当天",
        priority: "high",
        budget: 0,
        notes: "小心处理，避免弄脏",
        completed: false
      },
      {
        id: 34,
        name: "拍摄婚前照片",
        stage: "wedding",
        stageText: "婚礼当天",
        priority: "medium",
        budget: 0,
        notes: "与摄影师确认拍摄地点和风格",
        completed: false
      },
      {
        id: 35,
        name: "到达婚礼场地",
        stage: "wedding",
        stageText: "婚礼当天",
        priority: "high",
        budget: 0,
        notes: "提前到达，进行最后的准备",
        completed: false
      },
      {
        id: 36,
        name: "举行婚礼仪式",
        stage: "wedding",
        stageText: "婚礼当天",
        priority: "high",
        budget: 0,
        notes: "按照预定流程进行",
        completed: false
      },
      {
        id: 37,
        name: "拍摄全家福和宾客合影",
        stage: "wedding",
        stageText: "婚礼当天",
        priority: "medium",
        budget: 0,
        notes: "提前准备好合影名单",
        completed: false
      },
      {
        id: 38,
        name: "举行婚宴",
        stage: "wedding",
        stageText: "婚礼当天",
        priority: "high",
        budget: 0,
        notes: "享用美食，与宾客交流",
        completed: false
      },
      {
        id: 39,
        name: "敬酒环节",
        stage: "wedding",
        stageText: "婚礼当天",
        priority: "medium",
        budget: 0,
        notes: "准备好敬酒词",
        completed: false
      },
      {
        id: 40,
        name: "切蛋糕仪式",
        stage: "wedding",
        stageText: "婚礼当天",
        priority: "medium",
        budget: 0,
        notes: "与摄影师确认拍摄角度",
        completed: false
      },
      {
        id: 41,
        name: "扔花束/袜圈仪式",
        stage: "wedding",
        stageText: "婚礼当天",
        priority: "low",
        budget: 0,
        notes: "准备好花束和袜圈",
        completed: false
      },
      {
        id: 42,
        name: "送别宾客",
        stage: "wedding",
        stageText: "婚礼当天",
        priority: "medium",
        budget: 0,
        notes: "感谢宾客的到来",
        completed: false
      },
      {
        id: 43,
        name: "送还婚纱/礼服",
        stage: "after",
        stageText: "婚礼后",
        priority: "medium",
        budget: 0,
        notes: "按照租赁规定的时间归还",
        completed: false
      },
      {
        id: 44,
        name: "整理和保存婚礼物品",
        stage: "after",
        stageText: "婚礼后",
        priority: "medium",
        budget: 0,
        notes: "包括婚纱、饰品、请柬等纪念品",
        completed: false
      },
      {
        id: 45,
        name: "发送感谢卡",
        stage: "after",
        stageText: "婚礼后",
        priority: "medium",
        budget: 500,
        notes: "感谢亲友的礼物和祝福",
        completed: false
      },
      {
        id: 46,
        name: "处理婚礼照片和视频",
        stage: "after",
        stageText: "婚礼后",
        priority: "high",
        budget: 0,
        notes: "备份、整理和分享",
        completed: false
      },
      {
        id: 47,
        name: "开始蜜月旅行",
        stage: "after",
        stageText: "婚礼后",
        priority: "high",
        budget: 0,
        notes: "放松身心，享受二人世界",
        completed: false
      }
    ];

    const taskTableBody = document.getElementById('taskTableBody');
    const weddingDateInput = document.getElementById('weddingDate');
    const daysLeftElement = document.getElementById('daysLeft');
    const updateDateBtn = document.getElementById('updateDateBtn');
    const filterStage = document.getElementById('filterStage');
    const filterStatus = document.getElementById('filterStatus');
    const searchInput = document.getElementById('searchInput');
    // 已移除全选复选框，不再需要此变量
    const addTaskForm = document.getElementById('addTaskForm');
    const mobileAddTaskForm = document.getElementById('mobileAddTaskForm');
    const exportImageFab = document.getElementById('exportImageFab');
    const exportLoading = document.getElementById('exportLoading');
    const addTaskFab = document.getElementById('addTaskFab');
    const addTaskModal = document.getElementById('addTaskModal');
    const closeModalBtn = document.getElementById('closeModalBtn');
    const cancelAddTask = document.getElementById('cancelAddTask');

    function renderTable(tasks = weddingTasks) {
      taskTableBody.innerHTML = '';
      
      if (tasks.length === 0) {
        const row = document.createElement('tr');
        row.innerHTML = `
          <td colspan="6" class="py-4 px-4 text-center text-gray-500">
            <i class="fa fa-search text-2xl mb-2"></i>
            <p>没有找到匹配的任务</p>
          </td>
        `;
        taskTableBody.appendChild(row);
        return;
      }
      
      tasks.forEach((task, index) => {
        const row = document.createElement('tr');
        row.className = task.completed ? 'bg-gray-50' : '';
        
        let priorityClass = '';
        let priorityText = '';
        
        switch(task.priority) {
          case 'high':
            priorityClass = 'bg-red-100 text-red-800';
            priorityText = '高';
            break;
          case 'medium':
            priorityClass = 'bg-yellow-100 text-yellow-800';
            priorityText = '中';
            break;
          case 'low':
            priorityClass = 'bg-green-100 text-green-800';
            priorityText = '低';
            break;
        }
        
        row.innerHTML = `
          <td class="table-cell font-medium text-gray-600">
            ${index + 1}
          </td>
          <td class="table-cell ${task.completed ? 'task-complete' : ''}">
            <div class="font-medium">${task.name}</div>
            <div class="text-xs text-gray-500">${task.stageText}</div>
          </td>
          <td class="table-cell hidden md:table-cell ${task.completed ? 'task-complete' : ''}">${task.stageText}</td>
          <td class="table-cell hidden lg:table-cell">
            <span class="px-2 py-1 text-xs font-medium rounded-full ${priorityClass}">${priorityText}</span>
          </td>
          <td class="table-cell hidden md:table-cell ${task.completed ? 'task-complete' : ''}">
            ${task.budget > 0 ? `¥${task.budget.toLocaleString()}` : '-'}
          </td>
          <td class="table-cell hidden xl:table-cell ${task.completed ? 'task-complete' : ''}">
            <div class="text-sm">${task.notes || '-'}</div>
          </td>
          <td class="table-cell text-right">
            <button class="delete-task text-red-500 hover:text-red-700 mr-2" data-id="${task.id}" onclick="deleteTaskById(${task.id})">
              <i class="fa fa-trash"></i>
            </button>
            <button class="edit-task text-blue-500 hover:text-blue-700" data-id="${task.id}" onclick="handleEditTask(${task.id}); console.log('编辑按钮点击事件触发，任务ID:', ${task.id})">
              <i class="fa fa-pencil"></i>
            </button>
          </td>
        `;
        
        taskTableBody.appendChild(row);
      });
    }

    // 已移除复选框事件监听器，因为我们不再使用复选框

    function filterTasks() {
      const stageValue = filterStage.value;
      const statusValue = filterStatus.value;
      const searchValue = searchInput.value.toLowerCase();
      
      return weddingTasks.filter(task => {
        const stageMatch = stageValue === 'all' || task.stage === stageValue;
        
        const statusMatch = statusValue === 'all' || 
                          (statusValue === 'completed' && task.completed) || 
                          (statusValue === 'pending' && !task.completed);
        
        const searchMatch = task.name.toLowerCase().includes(searchValue) || 
                          (task.notes && task.notes.toLowerCase().includes(searchValue));
        
        return stageMatch && statusMatch && searchMatch;
      });
    }

    function calculateDaysLeft() {
      const weddingDate = new Date(weddingDateInput.value);
      const today = new Date();
      
      today.setHours(0, 0, 0, 0);
      weddingDate.setHours(0, 0, 0, 0);
      
      const diffTime = weddingDate - today;
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
      
      if (isNaN(diffDays)) {
        daysLeftElement.textContent = '-- 天';
      } else if (diffDays < 0) {
        daysLeftElement.textContent = `已过去 ${Math.abs(diffDays)} 天`;
      } else {
        daysLeftElement.textContent = `${diffDays} 天`;
      }
      
      return diffDays;
    }

    function saveTasksToLocalStorage() {
      try {
        localStorage.setItem('weddingTasks', JSON.stringify(weddingTasks));
        localStorage.setItem('weddingDate', weddingDateInput.value);
      } catch (error) {
        console.error('保存到本地存储失败:', error);
      }
    }

    function loadTasksFromLocalStorage() {
      try {
        const savedTasks = localStorage.getItem('weddingTasks');
        const savedDate = localStorage.getItem('weddingDate');
        
        if (savedTasks) {
          const parsedTasks = JSON.parse(savedTasks);
          
          parsedTasks.forEach(savedTask => {
            const existingTask = weddingTasks.find(t => t.id === savedTask.id);
            
            if (existingTask) {
              existingTask.completed = savedTask.completed;
            } else {
              weddingTasks.push(savedTask);
            }
          });
        }
        
        if (savedDate) {
          weddingDateInput.value = savedDate;
          calculateDaysLeft();
        }
      } catch (error) {
        console.error('从本地存储加载失败:', error);
      }
    }

    function exportTableToImage() {
      exportLoading.classList.remove('hidden');
      
      const tableContainer = document.getElementById('tableContainer');
      
      // 隐藏操作列
      const headerRow = tableContainer.querySelector('thead tr');
      const actionHeader = headerRow.lastElementChild;
      const originalActionHeaderDisplay = actionHeader.style.display;
      actionHeader.style.display = 'none';
      
      const rows = tableContainer.querySelectorAll('tbody tr');
      const originalRowDisplays = [];
      
      rows.forEach((row, index) => {
        const actionCell = row.lastElementChild;
        originalRowDisplays[index] = actionCell.style.display;
        actionCell.style.display = 'none';
      });
      
      html2canvas(tableContainer, {
        scale: 2,
        useCORS: true,
        logging: false
      }).then(canvas => {
        const link = document.createElement('a');
        link.download = '婚礼流程清单表.png';
        link.href = canvas.toDataURL('image/png');
        link.click();
        
        // 恢复显示操作列
        actionHeader.style.display = originalActionHeaderDisplay;
        
        rows.forEach((row, index) => {
          const actionCell = row.lastElementChild;
          actionCell.style.display = originalRowDisplays[index];
        });
        
        exportLoading.classList.add('hidden');
      }).catch(error => {
        console.error('导出图片失败:', error);
        
        // 恢复显示操作列
        actionHeader.style.display = originalActionHeaderDisplay;
        
        rows.forEach((row, index) => {
          const actionCell = row.lastElementChild;
          actionCell.style.display = originalRowDisplays[index];
        });
        
        exportLoading.classList.add('hidden');
        alert('导出图片失败，请重试！');
      });
    }

    function addNewTask(event, isMobile = false) {
      event.preventDefault();
      
      let taskName, taskStage, taskPriority, taskBudget, taskNotes, taskId;
      
      if (isMobile) {
        taskName = document.getElementById('mobileNewTaskName').value;
        taskStage = document.getElementById('mobileNewTaskStage').value;
        taskPriority = document.getElementById('mobileNewTaskPriority').value;
        taskBudget = parseFloat(document.getElementById('mobileNewTaskBudget').value) || 0;
        taskNotes = document.getElementById('mobileNewTaskNotes').value;
      } else {
        taskName = document.getElementById('newTaskName').value;
        taskStage = document.getElementById('newTaskStage').value;
        taskPriority = document.getElementById('newTaskPriority').value;
        taskBudget = parseFloat(document.getElementById('newTaskBudget').value) || 0;
        taskNotes = document.getElementById('newTaskNotes').value;
        taskId = addTaskForm.dataset.taskId; // 获取编辑任务的ID
      }
      
      const stageSelect = isMobile ? 
                        document.getElementById('mobileNewTaskStage') : 
                        document.getElementById('newTaskStage');
      const taskStageText = stageSelect.options[stageSelect.selectedIndex].text;
      
      if (taskId && !isMobile) {
        // 编辑现有任务
        const taskIndex = weddingTasks.findIndex(t => t.id === parseInt(taskId));
        
        if (taskIndex !== -1) {
          weddingTasks[taskIndex] = {
            ...weddingTasks[taskIndex],
            name: taskName,
            stage: taskStage,
            stageText: taskStageText,
            priority: taskPriority,
            budget: taskBudget,
            notes: taskNotes
          };
          
          alert('任务更新成功！');
        }
      } else {
        // 添加新任务
        const newTask = {
          id: Date.now(),
          name: taskName,
          stage: taskStage,
          stageText: taskStageText,
          priority: taskPriority,
          budget: taskBudget,
          notes: taskNotes,
          completed: false
        };
        
        weddingTasks.push(newTask);
        
        alert('任务添加成功！');
      }
      
      renderTable(filterTasks());
      
      saveTasksToLocalStorage();
      
      if (isMobile) {
        mobileAddTaskForm.reset();
      } else {
        addTaskForm.reset();
        addTaskModal.classList.add('hidden');
        // 重置模态框标题和任务ID
        document.querySelector('#addTaskModal h2').innerHTML = '<i class="fa fa-plus-circle text-primary mr-2"></i> 添加自定义任务';
        delete addTaskForm.dataset.taskId;
      }
    }

    function openAddTaskModal() {
      addTaskModal.classList.remove('hidden');
    }

    function closeAddTaskModal() {
      addTaskModal.classList.add('hidden');
      addTaskForm.reset();
      // 重置模态框标题和任务ID
      document.querySelector('#addTaskModal h2').innerHTML = '<i class="fa fa-plus-circle text-primary mr-2"></i> 添加自定义任务';
      delete addTaskForm.dataset.taskId;
    }

    function handleDeleteTask(taskId) {
      console.log('handleDeleteTask被调用，任务ID:', taskId);
      // 调用全局删除函数
      deleteTaskById(taskId);
    }
    
    function handleEditTask(taskId) {
      const task = weddingTasks.find(t => t.id === taskId);
      
      if (task) {
        // 填充表单数据到模态框
        document.getElementById('newTaskName').value = task.name;
        document.getElementById('newTaskStage').value = task.stage;
        document.getElementById('newTaskPriority').value = task.priority;
        document.getElementById('newTaskBudget').value = task.budget;
        document.getElementById('newTaskNotes').value = task.notes;
        
        // 更改模态框标题
        document.querySelector('#addTaskModal h2').innerHTML = '<i class="fa fa-pencil text-primary mr-2"></i> 编辑任务';
        
        // 保存原始任务ID
        addTaskForm.dataset.taskId = taskId;
        
        // 显示模态框
        addTaskModal.classList.remove('hidden');
      }
    }
    
    // 全局可访问的删除函数
    function deleteTaskById(taskId) {
      // 直接删除任务，无需确认
      const taskIndex = weddingTasks.findIndex(t => t.id === taskId);
      
      if (taskIndex !== -1) {
        weddingTasks.splice(taskIndex, 1);
        renderTable(filterTasks());
        saveTasksToLocalStorage();
      }
    }
    
    document.addEventListener('DOMContentLoaded', function() {
      loadTasksFromLocalStorage();
      
      renderTable();
      
      updateDateBtn.addEventListener('click', function() {
        calculateDaysLeft();
        saveTasksToLocalStorage();
      });
      
      filterStage.addEventListener('change', function() {
        renderTable(filterTasks());
      });
      
      filterStatus.addEventListener('change', function() {
        renderTable(filterTasks());
      });
      
      searchInput.addEventListener('input', function() {
        renderTable(filterTasks());
      });
      
      addTaskForm.addEventListener('submit', function(event) {
        addNewTask(event, false);
      });
      
      mobileAddTaskForm.addEventListener('submit', function(event) {
        addNewTask(event, true);
      });
      
      addTaskFab.addEventListener('click', openAddTaskModal);
      
      closeModalBtn.addEventListener('click', closeAddTaskModal);
      cancelAddTask.addEventListener('click', closeAddTaskModal);
      
      exportImageFab.addEventListener('click', exportTableToImage);
      
      printFab.addEventListener('click', printTable);
      
      addTaskModal.addEventListener('click', function(event) {
        if (event.target === addTaskModal) {
          closeAddTaskModal();
        }
      });
    });
  </script>
</body>
</html>